<template>
	<view class="mask">
		<u-popup v-model="regBool"  mode="center" :mask-close-able="false">
			<view class="mwrap">
				<image class="renge" mode="widthFix" :src="imgPath+'/static/big/viewFriend.png'"></image>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="content">
					<view class="no-data" v-if="friendList.length == 0">小队当前还没有队员加入，快去邀请吧！</view>
					<view class="item" v-for="(item,index) in friendList">
						<view class="avatar"></view>
						<image class="avatar" mode="widthFix" :src="item.avatar"></image>
						<view class="wxname">{{ item.engName }}</view>
						<image class="itemList" mode="widthFix" :src="imgPath+'/static/big/friend.png'"></image>
						<view class="copy" @click="copyText(item.engName)"></view>
					</view>
				</scroll-view>
				<image class="slide updown" v-if="friendList.length > 3" mode="widthFix" src="/static/slide.png"></image>
				<view class="cancel" @click="cancel"></view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import http from "@/src/http";
	export default {
		name:"ViewFriend",
		data() {
			return {
				regBool:false,
				isComplete:false,
				friendList:[]
			};
		},
		onLoad(){


			this.getInfo()
		},
		methods:{
			getMembers(){
				http.members().then(res=>{
					this.friendList = res.data
				})
			},
			getInfo(){
				// http.members().then(res=>{
				// 	console.log('members',res)
				// })

			},
			confirm(){
				this.regBool = false;
				this.$emit('success');
			},
			cancel(){
				this.regBool = false
				this.$emit('cancel',this.isComplete);
			},
			copyText(engName){
				wx.setClipboardData({
					data: engName,
					success(res){
						wx.getClipboardData({
							success(res){
								wx.showToast({
									icon: "none",
									title:'复制成功'
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

.mwrap{
	width: 750rpx;
	display: flex;
	justify-content: center;
	position: relative;
	.renge{
		width: 651rpx;
		position: relative;
	}
	.content{
		position: absolute;
    top: 228rpx;
    width: 500rpx;
    height: 450rpx;
    overflow: auto;
		.no-data{
			height: 100%;
			line-height: 450rpx;
			font-size: 28rpx;
			color: #ada8a8
		}
		.item{
			position: relative;
			.avatar{
				position: absolute;
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
				top: 13rpx;
				left: 23rpx;
			}
			.wxname{
				color: #333;
				font-weight: bold;
				position: absolute;
				width: 229rpx;
				height: 54rpx;
				line-height: 54rpx;
				border-radius: 27rpx;
				text-align: center;
				top: 28rpx;
				left: 136rpx;
				text-overflow: ellipsis;
			}
			.copy{
				position: absolute;
				width: 107rpx;
				height: 58rpx;
				border-radius: 40rpx;
				top: 26rpx;
				left: 346rpx;
			}
			.itemList{
				width: 466rpx;
			}
		}
	}
	.slide{
		position: absolute;
    z-index: 666;
    width: 74rpx;
    height: 70rpx;
    left: 324rpx;
    top: 664rpx;
	}
	.cancel{
		position: absolute;
    z-index: 666;
    width: 70rpx;
    height: 70rpx;
    left: 325rpx;
    border-radius: 35rpx;
    bottom: 10rpx;
	}
	.confirm{
		position: absolute;
    z-index: 666;
    width: 260rpx;
    height: 66rpx;
    left: 244rpx;
    border-radius: 33rpx;
    bottom: 106rpx;
	}
}

</style>